import { educationData } from './data/education';

export const Education = () => {
  return (
    <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 w-full py-8">
      <h2 className="text-3xl font-bold mb-8">教育背景</h2>
      <div className="relative">
        <div className="absolute left-4 h-full w-0.5 bg-purple-300 top-0"></div>
        {educationData.subSections.map((subSection) => (
          <div
            key={`edu-${subSection.id}`}
            className="relative pl-10 mb-6"
          >
            <div className="absolute left-0 w-3 h-3 rounded-full bg-purple-500 border-2 border-purple-300 -translate-x-1/2"></div>
            <div className="bg-white p-4 rounded-lg shadow-sm">
              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start">
                <h3 className="text-lg font-bold">{subSection.school}</h3>
                <span className="text-sm text-gray-500 mt-1 sm:mt-0">
                  {subSection.period}
                </span>
              </div>
              <div className="mt-1 text-sm text-gray-600">
                {subSection.degree}
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};